<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="danger" size="mini" @click="deleteBatch">批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-tree
      ref="tree"
      :data="list"
      :props="defaultProps"
      :expand-on-click-node="false"
      node-key="catId"
      show-checkbox
      :default-expanded-keys="expandedKey"
    >
      <span class="custom-tree-node" slot-scope="{ node, list }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            v-if="node.level <= 2"
            type="text"
            size="mini"
            @click="() => append(node)"
          >
            添加
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => edit(node)"
          >
            修改
          </el-button>
          <el-button
            v-if="node.childNodes.length === 0"
            type="text"
            size="mini"
            @click="() => remove(node)"
          >
            删除
          </el-button>
        </span>
      </span>
    </el-tree>


    <el-dialog
      :title="visible_category_type === 'add' ? '添加商品类型' : '编辑商品类型'"
      :visible.sync="visible_category"
      :close-on-click-modal="false"
      width="30%"
    >
      <el-form ref="form" :model="category">
        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="商品类型" label-width="150px" prop="name">
              <el-input v-model="category.name" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="图标地址" label-width="150px" prop="icon">
              <el-input v-model="category.icon" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="计量单位" label-width="150px" prop="productUnit">
              <el-input v-model="category.productUnit" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible_category = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdateCategory">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryCategoryTree,
  deleteCategory,
  appendCategory,
  updateCategory,
  queryByCategoryId,
  deleteBatchCategory
} from '@/api/product/category'

export default {
  data () {
    return {
      maxLevel: 0,
      category: {
        catId: null,
        name: '',
        parentCid: 0,
        catLevel: 0,
        showStatus: 1,
        sort: 0,
        icon: '',
        productUnit: '',
        productCount: 0
      },
      visible_category: false,
      visible_category_type: '', // add:添加 edit:编辑
      list: [],
      expandedKey: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  activated () {
    this.selectCategoryTree()
  },
  methods: {
    // 打开编辑商品类型弹框
    async edit (node) {
      this.visible_category_type = 'edit'
      const { data } = node
      const res = await queryByCategoryId(data.catId)
      this.category = res.data
      this.visible_category = true
    },
    // 添加或修改商品类型
    async saveOrUpdateCategory () {
      if (this.visible_category_type === 'edit') {
        const { catId, name, icon, productUnit } = this.category
        const params = { catId, name, icon, productUnit }
        await updateCategory(params)
        this.expandedKey = [this.category.parentCid]
      } else {
        const { data } = await appendCategory(this.category)
        this.expandedKey = [data.parentCid]
      }
      await this.selectCategoryTree()
      this.visible_category = false
    },
    // 显示树形商品类型
    async selectCategoryTree () {
      const { data } = await queryCategoryTree()
      this.list = data
    },
    // 打开添加商品类型弹框
    append (node) {
      this.visible_category_type = 'add'
      this.visible_category = true
      const { data } = node
      const { catId, catLevel } = data
      this.category = {parentCid: catId, catLevel: catLevel + 1}
    },
    // 删除商品类型
    remove (node) {
      this.$confirm('此操作将删除该商品类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          const { data } = node
          const { catId, parentCid } = data
          await deleteCategory(catId)
          this.expandedKey = [parentCid]
          await this.selectCategoryTree()
        } catch (error) {
          console.log(error)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消取消操作'
        })
      })
    },
    deleteBatch () {
      this.$confirm('此操作将删除该商品类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          const nodes = this.$refs.tree.getCheckedNodes()
          if (nodes.length > 0) {
            const ids = nodes.map(s => { return s.catId })
            await deleteBatchCategory(ids)
            await this.selectCategoryTree()
          }
        } catch (error) {
          console.log(error)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消取消操作'
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
